import axios from "axios";
import fileInfo from "./utils";
export default {
  data() {
    return {
      blobImg: "",
      showImg: "",
      fileName: "",
      fileType: "",
      uid: "",
      dialogFormVisible: false,

      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 245, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
    };
  },
  watch: {
    fileList: {
      handler(newV, oldV) {
        // if (newV && newV[newV.length - 1]) {
        //   if (this.mode == "cropper") {
        //     this.file2Percentage[newV[newV.length - 1].uid] = 101;
        //   }
        // }
      },
      immediate: true,
    },
  },
  methods: {
    //   裁剪圖片
    getCropData() {
      let self = this;

      this.$refs.cropper.getCropData((data) => {
        // console.log(data);
        let param = new FormData(); // 创建form对象

        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据
        // param.append("file",this.base64toFile(data, this.fileName)); // 通过append向form对象添加数据

        // console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
          // headers: {
          //   "Content-Type": "multipart/form-data; ",
          // },
          onUploadProgress: (progressevent) => {
            this.file2Percentage[self.uid] =
              ((progressevent.loaded / progressevent.total) * 100) | 0;
          },
        };

        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;

          if (response.code === 200) {
            var url = response.data[0].url;

            self.fileList = [
              {
                id: self.count * 2,
                url: data,
                mediaUrl: url,
                uid: self.uid,
                fileType: this.fileType,
              },
            ];
            self.file2Percentage[self.uid] = 101;
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    base64toFile(dataBase64, filename = "file") {
      let arr = dataBase64.split(",");
      let mime = arr[0].match(/:(.*?);/)[1]; //设置file文件流的type名称
      let suffix = mime.split("/")[1]; //设置file文件流的name名称
      const bstr = window.atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
    prepare(file) {
      console.log(
        "prepareprepareprepareprepareprepareprepare" + file.percentage,
        file
      );
      // this.clearFileSelect();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 <= this.maxSize;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.fileName = file.name;
        this.uid = file.uid;
        this.file2Percentage = {
          ...this.file2Percentage,
          [file.uid]: 0,
        };
        // 显示编辑图片
        this.blobImg = file.url;
        this.fileType = fileInfo.fileType(file);
        // 显示编辑弹窗
        this.showDialog(file);
        this.tempFileList = this.deepClone(this.fileList) 
        // 这里不能一次性全部清空，因为当前这个file在elinput中，清了的话没动画了
      // while (this.fileList.pop()) {}
      // this.$refs[`el-upload${this.count}`].clearFiles();

        // this.clearFile();
      }
    },

    // 显示编辑弹窗
    showDialog(file) {
      this.showImg = URL.createObjectURL(file.raw);
      this.dialogFormVisible = true;
    },
    // 点击取消
    close() {
      this.dialogFormVisible = false;
      // 取消去回显原图
      this.fileList = this.tempFileList
      this.$emit("close");
    },
    // 点击确定
    confirm() {

      this.dialogFormVisible = false;
      // this.$refs.upload.submit()
      this.getCropData();
    },
  },
};
